sakai-grader {

  .grader--visible {
    @extend .d-block;
    @extend .rounded-3;
    @extend .mt-2;
  }

  .grader-title {
    font-weight: bold;
  }

  #grader-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--sakai-border-color);
    padding: 5px;

    #grader-title-block {
      display: flex;
    }

    .grader-groups {
      margin-top: 10px;

      span {
        font-weight: bold;
      }
    }

    #grader-navigator {
      flex: 0 0 auto;
      text-align: center;
      text-decoration: none;
      button > i {
        font-size: 20px;
      }
      #grader-settings-link > i {
        font-size: 16px;
      }
      select {
        display: inline-block;
        margin: 0px 8px;
        max-width: 80%;
        &:focus { outline: 0;}
      }
      a { text-decoration: none; font-weight: bold; }
      .profile-image {
        margin-right: 6px;
        img {
          height: 26px;
        }
      }
    }
  }

  #gradable {
    padding: 5px;

    h3:first-child {
      margin-left: 5px;
    }

    #grader-link-block {
      position: sticky;
      z-index: 1;
      top: $banner-height;
      margin-top: 0.75em;
    }

    #grader-feedback-text {
      padding-bottom: 8px;
      border-bottom: 1px var(--sakai-border-color) solid;
    }

    .inline-feedback-button {
      margin-top: 8px;
    }
    .preview {
      padding: 5px;
      margin-top: 12px;

      sakai-document-viewer {
        .document-link { margin-bottom: 8px; font-weight: bold; }

        .preview-outer {
          background: var(--sakai-background-color-3);
          text-align: center;
          padding: 30px;
          .preview-middle {
            background: var(--sakai-background-color-1);
          }
          .preview-inner {
            width: 75%;
            background: var(--sakai-background-color-1);
            margin-top: 20px;
            margin-bottom: 20px;
            display: inline-block;
            padding: $standard-space-2x $standard-space-4x;
            text-align: left;
          }
          .nomargins {
            width: 100%;
            margin-top: 0px;
            margin-bottom: 0px;
          }
        }
      }
    }
  } // #gradable

  #grader-rubric-link {
    margin-left: 10px;
  }

  span.saved {
    color: var(--successBanner-color);
    font-size: 1.8em;
    margin-right: 5px;
    vertical-align: middle;
  }

  span.failed {
    color: var(--errorBanner-color);
  }


  a#peer-info {
    color: var(--infoBanner-color);
    font-size: 1.5em;
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;
  }

  #grader-submitted-block {
    margin: 10px 0 0 5px;

    #grader-submitted-label {
      margin-top: 5px;
      color: var(--successBanner-color);
    }

    .draft-submission {
      display: block;
      margin-top: 5px;
      color: var(--errorBanner-color);
    }
  }

  .grader-photo {
    min-width: 48px;
    width: 48px;
    height: 48px;
    background-position: 50%;
    background-size: auto 100%;
  }

  #grader {

    background-color: var(--sakai-title-bar-bg-color);

    #grader-rubric-block,
    #student-rubric-block {
      container-type: inline-size; /* Force the rubrics to display in rows */
    }

    .rubric-active {
      color: var(--successBanner-color);
    }

    .points-input {
      width: 60px;
    }

    /* Add styles for card-based snippets with text truncation */
    #feedback-snippet, #private-notes-snippet {
      .card-body {
        position: relative;
        max-height: 100px;
        overflow: hidden;
        &:has(.fade-overlay.d-none) { max-height: unset }

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 40px;
          background: linear-gradient(to bottom, rgba(255,255,255,0), var(--sakai-background-color-1, #fff));
          pointer-events: none;
        }
      }
    }

    .fade-text {
      position: relative;
      color: black;
      max-height: 50px;
    }

    .fade-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(top, transparent, white);
      pointer-events: none;
    }

    #grader-grade-block {
      border-bottom: 1px solid var(--sakai-border-color);

      input {
        margin-left: 10px;
        margin-right: 10px;
      }

      span {
        font-weight: bold;
      }
    }

    .active-indicator {
      display: inline-block;
      background: var(--successBanner-color);
      width: 18px;;
      height: 18px;
      border-radius: 50%;
      margin-left: 5px;
      &.unsaved {
        background: var(--warnBanner-color);
      }
    }

    #grader-media-feedback {

      display: none;

      margin-top: 10px;
      margin-bottom: 10px;

      .media-feedback-label {
        margin-right: 10px;
        font-weight: bold;
      }
      .fa-video-camera { margin-left: 10px; margin-right: 10px; }
      .fa-microphone { margin-left: 10px; }
    }

    .resubmission-checkbox {
      margin-top: 12px;
    }
    .resubmission-block {
      padding: 5px;
      margin-bottom: 10px;

      select {
        margin-right: 10px;
      }

      span {
        font-weight: bold;
      }

      sakai-date-picker {
        display: inline-block;
      }
    }

    #grader-submission-history-wrapper {
      border: 1px solid var(--sakai-border-color);
      border-radius: 5px;
      padding: 5px;
      margin-top: 20px;

      #grader-submission-history-toggle {
        margin: 3px 0px 3px 10px;
        a {
          text-decoration: none;
          font-weight: bold;
        }
      }

      #grader-submission-history {
        margin-left: 5px;
        h4 { font-size: 13px; margin-top: 15px;}
        .grader-history-title {
          font-weight: bold;
          margin-top: 10px;
        }
        .grader-history-block {
          margin-left: 5px;
          div,p {
            font-size: 12px;
            margin-bottom: 10px;
          }
        }
        #grader-history-grades-wrapper {
          border-top: 1px solid var(--sakai-border-color);
        }
        #grader-history-feedback-wrapper {
          border-top: 1px solid var(--sakai-border-color);
        }
        
      }
    }
  }

  .grader-block {
    border-bottom: 2px solid var(--sakai-border-color);
    padding-bottom: 10px;
  }

  #grader-feedback-attachments-block {
    padding-bottom: 5px;
    .feedback-attachments-title {
      font-weight: bold;
      margin-bottom: 10px;
    }

    .feedback-attachment-remove {
      margin-left: 7px;
    }

    .current-feedback-attachments {
      margin-bottom: 7px;
      background-color: var(--sakai-background-color-2);

      .feedback-attachments-row {
        display: flex;
        border: 1px solid var(--sakai-border-color);
        border-radius: 3px;
        padding: 3px;
        margin-bottom: 3px;

        .feedback-attachment {
          display: flex;
          flex: 2 75%;
        }
        .feedback-attachment-remove {
          font-weight: bold;
          display: flex;
          flex: 1 25%;
        }
      }
    }

    sakai-grader-file-picker {

      .sakai-file-picker-list {
        margin-top: calc(#{$standard-spacing} / 4);
        padding-left: calc(#{$standard-spacing} / 2);
        .sakai-file-picker-list-title {
          margin-bottom: calc(#{$standard-spacing} / 4);
          font-style: italic;
        }
        .file-row {
          display: flex;
          width: 100%;
          padding: calc(#{$standard-spacing} / 4);
          margin-bottom: calc(#{$standard-spacing} / 4);
          margin-left: calc(#{$standard-spacing} / 2);

          .file {
            flex: 2 75%;
            margin-right: calc(#{$standard-spacing} / 4);
            overflow-wrap: anywhere;
          }
          .file-remove {
            display: flex;
            flex: 1 25%;
          }
        }
      }
    }
  }

  .submitter-name {
    font-weight: bold;
  }

  .grader-originality-label > span:first-child {
      margin-right: 5px;
  }
  
  .grader-originality-section {
    padding-left: 1em;
  }

  .grader-originality-separator {
    margin-left: 5px;
    margin-right: 5px;
  }
  
  .grader-originality-link {
    text-decoration: none;
    span {
      margin-left: 5px;
    }
  }
  
  .grader-originality-caption {
    border: 1px solid var(--sakai-border-color);
    border-radius: 0px 5px 5px 5px;
    padding: 5px;
    margin-bottom: 5px;
    span:first-child {
      margin-right: 5px;
    }
  }

  .submitted-time {
    font-size: 12px;
    font-weight: 550;
  }

  .draft-time {
    color: var(--errorBanner-color);
  }

  .attachments-header {
    margin-top: 7px;
    font-size: 14px;
    font-weight: 550;
    margin-bottom: 5px;
  }

  .grader-label {
    margin-bottom: 5px;
    margin-top: 10px;
    font-weight: bold;
  }
  .feedback-label span, .private-notes-label span {
    margin-right: 7px;
  }

  .content-button-block {
    display: flex;
    align-items: center;
  }

  .attachments, .private-notes-block { margin-bottom: 10px; margin-top: 10px;}

  .action-button-block {
    margin-top: 20px;
  }

  div.gradables-tabs {

    li {
      list-style: none;

      a {
        text-decoration: none;
        float: left;
        height: 20px;
        line-height: 20px;
        padding: 0 5px;
        margin: 0 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: var(--successBanner-bgcolor);
        font-size: 14px;
        color: var(--successBanner-color);
      }
    }
  }

  .grader-late {
    margin-left: 5px;
    font-weight: bold;
    font-size: 12px;
    color: var(--errorBanner-color);
  }

  #grader-overrides-wrapper {
    margin-top: 5px;
    .grader-overrides-label {
      font-weight: normal;
    }
    .grader-overrides-display-name {
      font-weight: 600;
    }
    .grader-override {
      margin-bottom: 5px;
    }
    #grader-overrides-block {
      margin-top: 10px;
      margin-left: 20px;
    }
  }

  .grader-returned {
    font-size: 18px;
    font-weight: bold;
    color: var(--successBanner-color);
    margin-top: auto;
  }

  .action-button-block {
    button {
      padding: 7px 9px;
    }
  }

  @media #{$tablet} {

    #grader-topbar {
      display: block;

      #grader-navigator {
        button > i {
          font-size: 24px;
        }

        #grader-settings-link > i {
          font-size: 20px;
        }
      }

      #grader-title-block {
        justify-content: center;
        text-align: center;
      }

      #grader-total {
        text-align: center;
        margin-top: 12px;
        margin-bottom: 6px;
      }
    }

    #grader-submitted-block {
      margin-top: 12px;
    }

    #gradable {
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 3px solid var(--sakai-border-color);
    }

    #grader-save-buttons > button {
      display: block;
      width: 100%;
      margin-bottom: 6px;
    }
  } //media tablet

  @include media-breakpoint-up(lg) {
    /* Desktop layout */
    #grader {
      position: sticky;
      top: 0;
      width: 400px;
      height: calc(100vh - 160px); /* Subtract header height */
      overflow-y: auto;
      padding-bottom: 20px;
    }

    /* Fix the flex layout for desktop */
    .d-flex.flex-column.flex-lg-row {
      display: flex;
      flex-direction: row;
      width: 100%;
      flex-wrap: nowrap;
      align-items: flex-start;
      height: 100vh;
    }
    
    /* Ensure the gradable container takes appropriate space and shows scrollbars */
    #grader-gradable-container {
      flex: 1;
      height: 100%;
      overflow-y: scroll;
    }
    
    /* Ensure the gradable content area has proper height */
    #grader-gradable-content {
      height: auto;
      min-height: 100%;
    }
  }
}
